<script setup lang="ts">
import { reactive, ref } from "vue";
import bg from "@/assets/WechatIMG655.jpg";
const form = reactive({
  name: "",
  status: "",
  departmentLeader: "",
  projectLeader: ""
});
const tableData1 = [
  {
    name: "社区邻里国际共融服务项目",
    type: "支出",
    money: "10000",
    income: "5000",
    expend: "5000",
    rate: "50%",
    surplus: "5000",
    balance: "5000",
    schedule: "50%"
  },
  {
    name: "“民生共富”社会工作站品牌共建项目",
    type: "支出(总分式)",
    money: "10000",
    income: "5000",
    expend: "5000",
    rate: "50%",
    surplus: "5000",
    balance: "5000",
    schedule: "50%"
  }
];
const columns = [
  {
    label: "项目名称",
    align: "center",
    prop: "name",
    width: "200px",
    fixed: "left",
    slot: "name",
    showOverflowTooltip: true
  },
  {
    label: "预算类型",
    align: "center",
    prop: "type"
  },
  {
    label: "预算金额",
    align: "center",
    prop: "money"
  },
  {
    label: "累计收入",
    align: "center",
    prop: "income"
  },
  {
    label: "累计支出",
    align: "center",
    prop: "expend"
  },
  {
    label: "预算执行率",
    align: "center",
    prop: "rate"
  },
  {
    label: "预算剩余",
    align: "center",
    prop: "surplus"
  },
  {
    label: "已收款结余",
    align: "center",
    prop: "balance"
  },
  {
    label: "时间进度",
    align: "center",
    prop: "schedule"
  }
];
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: tableData1.length,
  align: "right",
  background: true,
  small: false
});
import infodialog from "./infodialog.vue";
const infodialogRef = ref("");
</script>

<template>
  <el-card class="m-[20px]">
    <el-form inline>
      <el-form-item label="项目名称">
        <el-input
          v-model="form.name"
          placeholder="请输入项目名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option label="进行中" value="进行中"></el-option>
          <el-option label="已结束" value="已结束"></el-option>
          <el-option label="未开始" value="未开始"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门负责人">
        <el-select
          v-model="form.departmentLeader"
          placeholder="请选择部门负责人"
          clearable
        >
          <el-option label="张三" value="张三"></el-option>
          <el-option label="李四" value="李四"></el-option>
          <el-option label="王五" value="王五"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目负责人" prop="projectLeader">
        <el-select
          v-model="form.projectLeader"
          placeholder="请选择项目负责人"
          clearable
        >
          <el-option label="赵六" value="赵六"></el-option>
          <el-option label="钱七" value="钱七"></el-option>
          <el-option label="孙八" value="孙八"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button type="primary">查询</el-button>
    <el-button>重置</el-button>
    <pure-table
      class="mt-[20px]"
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
      :pagination="pagination"
    >
      <template #name="{ row }">
        <el-text
          type="primary"
          class="cursor-pointer"
          @click="infodialogRef.openDrawer(row)"
          >{{ row.name }}</el-text
        >
      </template>
    </pure-table>
    <!-- <img :src="bg" alt="" srcset="" /> -->
  </el-card>
  <infodialog ref="infodialogRef" />
</template>

<style lang="scss" scoped>
.el-select {
  --el-select-width: 220px;
}
.el-input {
  --el-input-width: 220px;
}
</style>
